<template>
    <div class="madp-welcom-speech">
        <basic-container>
            <el-form :inline="true" :model="searchParams" ref="searchParams" class="madp-searchbox" label-width="120px">
                <div class="madp-search">
                    <el-form-item prop="search" label="关键词:">
                        <el-input v-model.trim="searchParams.search" maxlength="20" placeholder="请输入关键字"></el-input>
                    </el-form-item>
                    <el-form-item prop="type" label="欢迎语类型:">
                        <el-select v-model="searchParams.type">
                            <el-option label="图片" :value="2"></el-option>
                            <el-option label="图文" :value="3"></el-option>
                            <el-option label="小程序" :value="6"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="date" label="创建时间:">
                        <el-date-picker
                            v-model="searchParams.date"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="{
                                disabledDate(time) {
                                    return time.getTime() > Date.now();
                                }
                            }"
                        ></el-date-picker>
                    </el-form-item>
                </div>
            </el-form>
            <div class="madp-tar">
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button @click="searchClean">清空</el-button>
            </div>
            <el-button v-if="permissions.cp_welcome_speech_add" class="madp-addbutton" type="primary" icon="el-icon-plus" @click="addSpeech">新建欢迎语</el-button>
            <!-- 表格 -->
            <el-table
                v-loading="tableLoading"
                :header-cell-style="{
                    background: 'rgb(255, 191, 191)',
                    color: 'rgb(44,44,44)'
                }"
                :data="tableData"
            >
                <el-table-column label="序号" type="index" width="60" align="center">
                    <template slot-scope="scope">
                        <span v-text="getIndex(scope.$index)"></span>
                    </template>
                </el-table-column>
                <el-table-column label="欢迎语类型" align="center">
                    <template slot-scope="scope">
                        <div>{{ scope.row.type | getText }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="welcomeText" label="欢迎语内容" align="center" class="madp-welcome-content" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type == 2" class="madp-content-display">
                            <div class="madp-content-text">
                                <p>{{ scope.row.words ? scope.row.words : '-' }}</p>
                            </div>
                        </div>
                        <div v-if="scope.row.type === 3" class="madp-content-display">
                            <div class="madp-content-text">
                                <p>{{ scope.row.words ? scope.row.words : '-' }}</p>
                            </div>
                        </div>
                        <div v-if="scope.row.type === 6" class="madp-apples-content">
                            <div class="madp-apples-img-content">
                                <div class="madp-content-text">
                                    <p>{{ scope.row.words ? scope.row.words : '-' }}</p>
                                </div>
                            </div>
                        </div>
                        <div v-if="scope.row.type === 1" class="madp-apples-content">
                            <div class="madp-apples-img-content">
                                <div class="madp-content-text">
                                    <p>{{ scope.row.words ? scope.row.words : '-' }}</p>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="标题(含封面图)" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type == 1" class="madp-content-display">{{ '-' }}</div>
                        <div v-if="scope.row.type == 2" class="madp-content-display">
                            <img :src="scope.row.mediumContent[0].content.url" alt class="img40l" />
                        </div>
                        <div v-if="scope.row.type === 3" class="madp-content-display">
                            <img v-if="scope.row.mediumContent[0].content.imgUrl" :src="scope.row.mediumContent[0].content.imgUrl" alt class="img40l" />
                            <div class="madp-content-text">
                                <p class="madp-content-desc">
                                    {{ scope.row.mediumContent[0].content.title }}
                                </p>
                            </div>
                        </div>
                        <div v-if="scope.row.type === 6" class="madp-apples-content">
                            <div class="madp-apples-img-content">
                                <img :src="scope.row.mediumContent[0].content.imgUrl" alt class="img40l" />
                                <div class="madp-content-text">
                                    <!-- <p>
                                        {{ scope.row.words }}
                                    </p>-->
                                    <p class="madp-content-desc">
                                        {{ scope.row.mediumContent[0].content.title }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="rangeTypeText" label="成员" align="center"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
                <el-table-column label="操作" align="center" v-if="permissions.cp_welcome_speech_edit || permissions.cp_welcome_speech_del">
                    <template slot-scope="scope">
                        <el-button v-if="permissions.cp_welcome_speech_edit" @click.native.prevent="editRow(scope.row)" type="text">编辑</el-button>
                        <el-button v-if="permissions.cp_welcome_speech_del" @click.native.prevent="deleteRow(scope.row)" type="text">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                background
                class="madp-pagination"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-sizes="[10, 20, 30, 50, 100]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
            ></el-pagination>
        </basic-container>
    </div>
</template>

<script>
import { getWelcomeList, delWelcome } from '@/api/customer-into/welcomespeech';
import { mapGetters } from 'vuex';
export default {
    name: 'welcomSpeech',
    data() {
        return {
            // 弹窗开关
            visible: false,
            // 分页
            page: {
                currentPage: 1,
                pageSize: 10,
                total: 0
            },
            permission: 'ALL', //权限:ALL-全部,DEPARTMENT-部门,EMPLOYEE-员工
            // 条件表单对象
            searchParams: {
                search: '',
                type: '',
                date: ''
            },
            // 表格数据
            tableData: [],
            // 表格loading
            tableLoading: false
        };
    },
    computed: {
        ...mapGetters(['permissions'])
    },
    mounted: function() {
        this.getList();
    },
    filters: {
        getText(val) {
            // 1.文本2.图片，2.图文，6.小程序
            switch (val) {
                case 1:
                    return '文本';
                case 2:
                    return '图片';
                case 3:
                    return '图文';
                case 6:
                    return '小程序';
            }
        }
    },
    methods: {
        //获取表格序号
        getIndex($index) {
            return (this.page.currentPage - 1) * this.page.pageSize + $index + 1;
        },
        // 获取表格数据
        getList() {
            this.tableLoading = true;
            let da = {
                current: this.page.currentPage,
                size: this.page.pageSize,
                permission: this.permission,
                search: this.searchParams.search,
                type: this.searchParams.type,
                startTime: this.searchParams.date[0] ? this.searchParams.date[0] : '',
                endTime: this.searchParams.date[1] ? this.searchParams.date[1] : ''
            };
            getWelcomeList(da).then((res) => {
                if (res.data.code === 0) {
                    this.tableData = res.data.data.records;
                    this.page.total = res.data.data.total;
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.msg
                    });
                }
                this.tableLoading = false;
            });
        },
        // 新增欢迎语
        addSpeech() {
            //to新建欢迎语
            this.$router.push({
                name: 'addSpeech',
                params: {
                    type: 'add'
                }
            });
        },
        // 分页
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.page.currentPage = val;
            this.getList();
        },
        // 编辑
        editRow(row) {
            console.log('编辑的参数----', row);
            this.$router.push({
                name: 'addSpeech',
                params: {
                    msg: row
                }
            });
        },
        //删除
        deleteRow(row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    delWelcome(row.greetingId).then((res) => {
                        if (res.data.code === 0) {
                            this
                                .getList
                                // this.page.currentPage,
                                // this.page.pageSize,
                                // this.permission
                                ();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    });
                })
                .catch(() => {});
        },
        //搜索
        search() {
            this.page.currentPage = 1;
            this.getList();
        },
        // 清空
        searchClean() {
            this.$refs.searchParams.resetFields();
            this.getList();
        }
    }
};
</script>

<style lang="scss" scoped>
.madp-welcom-speech /deep/.el-date-editor .el-range-separator {
    width: 25px;
}
.madp-welcom-speech {
    .madp-searchbox {
        display: flex;
        justify-content: flex-end;
    }
    .madp-showbottom {
        display: flex;
        font-size: 14px;
        color: #606266;
        span {
            margin-left: 5px;
        }
        .up {
            transform: rotate(180deg);
            animation: aniDown 0.8s;
        }
        @keyframes aniDown {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(180deg);
            }
        }
        .down {
            transform: rotate(0deg);
            animation: aniUp 0.8s;
        }
        @keyframes aniUp {
            from {
                transform: rotate(180deg);
            }
            to {
                transform: rotate(0deg);
            }
        }
    }
    .madp-addbutton {
        margin-bottom: 20px;
    }
    .madp-pagination {
        float: right;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .img40l {
        width: 40%;
    }
}
.madp-search {
    display: flex;
    flex-wrap: wrap;
    &-item {
        display: flex;
        flex-wrap: wrap;
    }
    &-btn {
        display: flex;
        flex-wrap: nowrap;
    }
}
.el-tooltip__popper {
    font-size: 14px;
    max-width: 50%;
    background-color: #68859a !important;
} /*设置显示隐藏部分内容，按50%显示*/
.madp-welcome-content {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
